<template>
  <div id="app">
    <keep-alive :include="include">
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
    <MyTabBar />
  </div>
</template>

<script>
// import Home from '@/views/home/Home.vue'
import MyTabBar from '@com/MyTabBar'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'App',
  props: {},
  data() {
    return {
      include: [],
    }
  },
  components: {
    MyTabBar,
    // Home,
  },
  computed: {},
  watch: {
    $route(to, from) {
      //如果 要 to(进入) 的页面是需要 keepAlive 缓存的，把 name push 进 include数组
      if (to.meta.keepAlive) {
        !this.include.includes(to.name) && this.include.push(to.name)
      }
      //如果 要 form(离开) 的页面是 keepAlive缓存的，
      //再根据 deepth 来判断是前进还是后退
      //如果是后退
      if (from.meta.keepAlive && to.meta.deepth < from.meta.deepth) {
        let index = this.include.indexOf(from.name)
        index !== -1 && this.include.splice(index, 1)
      }
      if (
        to.name == 'Home' &&
        from.name != 'Login' &&
        from.path != '/' &&
        from.name != 'Merits' &&
        from.name != 'My' &&
        from.name != 'Message'
      ) {
        // 进入home页面 清除历史记录
        if (history.length < 2) return false
        let routeHistory = history.length - 1
        this.$router.go(-routeHistory)
      }
    },
  },
  mounted() {},
  methods: {},
}
document.addEventListener('DOMContentLoaded', () => {
  const html = document.querySelector('html')
  let fontSize = window.innerWidth / 10
  fontSize = fontSize > 50 ? 50 : fontSize
  html.style.fontSize = fontSize + 'px'
})
</script>

<style lang="scss">
* {
  font-family: 'fz';
  letter-spacing: 1px;
}
#app {
  height: 100%;
  width: 100%;
  position: relative;
  color: #333333;
  font-size: 14px;

  font-family: PingFang;
  .lo {
    background: red;
    z-index: 1;
    position: absolute;
  }
}
</style>
